<!--<template>-->

<!--  <h1>111</h1>-->
<!--&lt;!&ndash;  <router-view></router-view>&ndash;&gt;-->
<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--  name: "Login"-->
<!--};-->
<!--</script>-->

<!--<style scoped>-->

<!--</style>-->

<template>
  <router-view></router-view>
  <div class="login-container">
    <h2>请注册</h2>
    <form @submit.prevent="login">
      <div class="form-group">
        <input type="username" v-model="username" placeholder="用户名" required>
      </div>
      <div class="form-group">
        <input type="password" v-model="password" placeholder="密码" required>
      </div>
      <div class="form-group">
        <input type="password" v-model="passwordConfirm" placeholder="确认密码" required>
      </div>
      <div class="form-group">
        <input type="username" v-model="email" placeholder="电子邮箱" required>
      </div>
      <div class="form-group">
        <input type="username" v-model="realname" placeholder="真实姓名" required>
      </div>

<!--      <select>-->
<!--        <option>18岁以下</option>-->
<!--        <option>18-28岁</option>-->
<!--        <option>28-38岁</option>-->
<!--        <option>38岁以上</option>-->
<!--      </select>-->

<!--      <select>-->
<!--        <option>18岁以下</option>-->
<!--        <option>18-28岁</option>-->
<!--        <option>28-38岁</option>-->
<!--        <option>38岁以上</option>-->
<!--      </select>-->

<!--      <select>-->
<!--        <option>18岁以下</option>-->
<!--        <option>18-28岁</option>-->
<!--        <option>28-38岁</option>-->
<!--        <option>38岁以上</option>-->
<!--      </select>-->

      <div class="form-group" v-show="provincialIsShow">
        <span class="select-label">省级区划：</span>
          <div class="select-container">
            <select class="custom-select" v-model="provincialSelect" @change="provincialHasChange">
              <option v-for="divisionList in divisionListProvincial" :value="divisionList['id']" :key="divisionList['id']">
                {{ divisionList['divisionName'] }}</option>
            </select>
          </div>
      </div>

      <div class="form-group" v-show="municipalIsShow">
        <span class="select-label">市级区划：</span>
        <div class="select-container">
          <select class="custom-select" v-model="municipalSelect" @change="municipalHasChange">
            <option v-for="divisionList in divisionListmunicipal" :value="divisionList['id']" :key="divisionList['id']">
              {{ divisionList['divisionName'] }}</option>
          </select>
        </div>
      </div>

      <div class="form-group" v-show="districtIsShow" @change="districtHasChange">
        <span class="select-label">区级区划：</span>
        <div class="select-container">
          <select class="custom-select" v-model="districtSelect" >
            <option v-for="divisionList in divisionListDistrict" :value="divisionList['id']" :key="divisionList['id']">
              {{ divisionList['divisionName'] }}</option>
          </select>
        </div>
      </div>

      <button type="submit" class="btn-wbz" @click="register">确认</button>
      <h1></h1>
    </form>
    <button type="submit" class="btn-wbz" @click="toLogin">已有账号，登录</button>
<!--    <h1> 这是注册 </h1>-->
  </div>
</template>

<script>
import router from "@/router";
import axios from "@/settings/axios";
import utils from "@/js/util/utils"
// import sysMapping from "@/settings/sysMapping"

export default {
  name: "Register",
  data() {
    return {
      username: '',
      password: '',
      passwordConfirm: '',
      email: '',
      realname: '',
      divisionLevelInfoList: '',
      provincialSelect: '',
      municipalSelect: '',
      districtSelect: '',
      divisionListProvincial: [],
      divisionListmunicipal: [],
      divisionListDistrict: [],
      provincialIsShow: true,
      municipalIsShow: false,
      districtIsShow: false,
      divisionIdList: ['','',''], // 三个元素依次代表省市县，取最后一个不为空的作为最终区划ID
    }
  },
  methods: {
    login() {
      // 在此处添加登录逻辑
      console.log('username:', this.username);
      console.log('Password:', this.password);

      // 清空表单字段
      // this.username = '';
      this.password = '';
      this.passwordConfirm = '';

      this.provincialSelect = "";
      this.municipalSelect = "";
      this.districtSelect = "";
    },
    toRegister() {
      router.push("/user/register");
    },
    toLogin() {
      router.push("/user/login");
    },
    async provincialHasChange (event) {
      let provincialId = event.target.value;
      this.divisionIdList[0] = provincialId;
      let municipalLevel = this.divisionLevelInfoList.find(obj => obj['levelNameEn'] === 'municipal')["level"];
      let divisionLevelVO = {
        "divisionLevel": municipalLevel,
        "parentId": provincialId
      };
      let divisionListmunicipal = await axios.post("/sys_division/get_division_list_by_level",divisionLevelVO);
      this.divisionListmunicipal = divisionListmunicipal;
      this.municipalSelect = '';
      this.districtSelect = '';
      this.municipalIsShow = true;
    },
    async municipalHasChange(event) {
      let municipalId = event.target.value;
      this.divisionIdList[1] = municipalId;
      let districtLevel = this.divisionLevelInfoList.find(obj => obj['levelNameEn'] === 'district')["level"];
      let divisionLevelVO = {
        "divisionLevel": districtLevel,
        "parentId": municipalId
      };
      let divisionListDistrict = await axios.post("/sys_division/get_division_list_by_level",divisionLevelVO);
      this.divisionListDistrict = divisionListDistrict;
      this.districtSelect = '';
      this.districtIsShow = true;
    },
    async districtHasChange(event) {
      let districtId = event.target.value;
      this.divisionIdList[2] = districtId;
      console.log(this.divisionIdList);
    },
    async register() {
      if (utils.isEmptyStr(this.username) ) {
          alert("用户名不能为空");
          return;
      }
      if (utils.isEmptyStr(this.password)) {
        alert("密码不能为空");
        return;
      }
      if (utils.isEmptyStr(this.passwordConfirm)) {
        alert("第二个密码框不能为空");
        return;
      }
      if (utils.isEmptyStr(this.divisionIdList[0])) {
        alert("省级行政区划不能为空");
        return;
      }
      if (this.password !== this.passwordConfirm) {
        alert("两次密码输入不一致");
      }
      if (!utils.isEmail(this.email)) {
        alert("电子邮箱不能为空，且格式必须正确");
      }

      let divisionId = this.getdivisionId();
      let userSignUpInVO = {
        "divisionCode": divisionId,
        "divisionId": divisionId,
        "email": this.email,
        "password": this.password,
        "realname": this.realname,
        "status": 1,
        "username": this.username
      }

      let theResult = await axios.post("/SysUser/signUp",userSignUpInVO)
      if (!utils.isEmptyStr(theResult["id"])) {
        alert("注册成功!");
        await router.push("/user/login");
      }




    },
    getdivisionId() {
      let lastNonEmptyString = '';
      while (this.divisionIdList.length > 0) {
        lastNonEmptyString = this.divisionIdList.pop();
        if (lastNonEmptyString !== '') {
          return lastNonEmptyString;
        }
      }
      return lastNonEmptyString;
    }
  },
  async mounted() {
    let divisionLevelInfoList = await axios.post("/sys_division/get_division_level_info");
    this.divisionLevelInfoList = divisionLevelInfoList;
    let provincialLevel = this.divisionLevelInfoList.find(obj => obj['levelNameEn'] === 'provincial')["level"];
    let divisionListProvincial = await axios.post("/sys_division/get_division_list_by_level",{"divisionLevel":provincialLevel});
    this.divisionListProvincial = divisionListProvincial;
    this.provincialSelect = "";
    this.municipalSelect = "";
    this.districtSelect = "";
  }
}
</script>

<style scoped>
.login-container {
  max-width: 350px;
  margin: 0 auto;
  padding: 20px;
  background: #f2f2f2;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  text-align: center;
}

h2 {
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

input[type="username"],
input[type="password"]{
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.btn-wbz {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  background: #4CAF50;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.example-showcase .el-dropdown + .el-dropdown {
  margin-left: 15px;
}

/*!* 修改按钮悬停时的背景颜色 *!*/
button:hover {
  background: #45a049;
}

/*****************/

/* 添加自定义下拉列表样式 */
.custom-select {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border-radius: 4px;
  border: 1px solid #ccc;
}


.select-label {
  margin-right: 10px;
  width: 100px;
  white-space: nowrap;
}

.select-container {
  width: 100%;
}

</style>


